<!-- 选择禁言时长 -->
<template>
  <div id="GroupSilencev">
    <!-- 头部 -->
    <Head title="选择禁言时长" BackType1="true"></Head>
    <!-- 主体 -->
    <div id="Main">
      <div class="silence">
        <span>请选择禁言时常</span>
      </div>
      <div class="timeChoose">
        <van-radio-group v-model="radio">
          <van-cell clickable @click="radio = '1'">
            <van-radio name="1"/>
            <span>10分钟</span>
          </van-cell>
          <van-cell clickable @click="radio = '2'">
            <van-radio name="2"/>
            <span>1小时</span>
          </van-cell>
          <van-cell clickable @click="radio = '3'">
            <van-radio name="3"/>
            <span>12小时</span>
          </van-cell>
          <van-cell clickable @click="radio = '4'">
            <van-radio name="4"/>
            <span>1天</span>
          </van-cell>
        </van-radio-group>
        <div class="custom" @click="show=true">
          <span>自定义</span>
          <img src="../assets/img/arrowIcon.png" alt>
        </div>
      </div>
      <van-picker :columns="columns" @change="onChange" :show-toolbar=true confirm-button-text="完成" v-show="show"/>
      <div class="tagBox" v-show="show">
        <span class="tag1">天</span>
        <span class="tag2">小时</span>
        <span class="tag3">分钟</span>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "../components/Head.vue";
import { Cell, CellGroup } from "vant";
import { Picker } from "vant";
import { RadioGroup, Radio } from "vant";
const times = {
  'day': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  'hour': [
    '00',
    '01',
    '02',
    '03',
    '04',
    '05',
    '06',
    '07',
    '08',
    '09',
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23
  ],
  'minute': [
    '00',
    '01',
    '02',
    '03',
    '04',
    '05',
    '06',
    '07',
    '08',
    '09',
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
    21,
    22,
    23,
    24,
    25,
    26,
    27,
    28,
    29,
    30,
    31,
    32,
    33,
    34,
    35,
    36,
    37,
    38,
    39,
    40,
    41,
    42,
    43,
    44,
    45,
    46,
    47,
    48,
    49,
    50,
    51,
    52,
    53,
    54,
    55,
    56,
    57,
    58,
    59
  ]
};

export default {
  data() {
    return {
      radio: "1",
      show: false,
      columns: [
        {
          values: times['day'],
          className: "column1"
        },
        {
          values: times['hour'],
          className: "column2"
        },
        {
          values: times['minute'],
          className: "column3"
        }
      ]
    };
  },
  components: {
    Head,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Picker.name]: Picker,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio
  },
  methods: {
    onChange(res) {
      console.log(res);
    }
  }
};
</script>

<style lang="less" scoped>
#GroupSilencev {
  font-size: 28px;
  #Main {
    position: fixed;
    top: 88px;
    overflow: scroll;
    width: 100%;
    .silence {
      background-color: #fff0f0;
      span {
        display: block;
        font-size: 28px;
        padding-top: 10px;
        padding-bottom: 13px;
        padding-left: 97px;
        background: url("../assets/img/silence.png") no-repeat 40px center;
        background-size: 37px 35px;
        color: #fa492c;
      }
    }
    .timeChoose {
      .van-cell {
        padding: 0;
        div {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            display: block;
            padding-top: 32px;
            padding-bottom: 32px;
            width: 100%;
            border-bottom: 1px solid #e5e5e5;
          }
        }
      }
      .van-cell:not(:last-child)::after {
        border-bottom: none;
      }
      .van-radio {
        padding-right: 30px;
        padding-left: 30px;
      }
      .custom:active {
        background: #f2f3f5;
      }
      .custom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 28px;
        padding-bottom: 26px;
        padding-right: 30px;
        padding-left: 30px;
        background-color: #ffffff;
        border-bottom: 1px solid #e5e5e5;
        span {
          font-size: 34px;
          color: #323232;
          font-family: PingFangSC-Regular;
          font-weight: 400;
        }
        img {
          width: 16px;
          height: 25px;
        }
      }
    }
    .tagBox{
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 14px;
      .tag1{
        padding-left: 150px;
      }
      .tag2{
        padding-left: 220px;
        padding-right: 200px;
      }
    }
  }
}
</style>
